<template>
	<view class="container">
		<view class="top-box">
			<view class="top-title">
				<view class="english-title">
					PARTY PAYMENT
				</view>
				<view class="chinese-title">
					党员缴费
				</view>
			</view>
			<view class="search-box">
				<view>筛选：</view>
				<picker :range="yearList" @change="yearChange">
					<text>{{chooseYear}}年</text>
					<uni-icons type="arrowdown" color="#afafaf" size="14" style="margin-left: 10upx;"></uni-icons>
				</picker>
			</view>
		</view>
		<view class="record-box">
			<empty v-if="partyFeeList.length == 0" style="z-index: -1;"></empty>
			<scroll-view class="scroll-box" refresher-enabled="true" :refresher-triggered="pullEnd" @refresherrefresh="pullBox"
			 scroll-y v-else>
				<view class="record-box-item" v-for="(item,index) in partyFeeList" :key="index">
					<view class="list-cell">
						<view class="list-title">
							{{item.month}}党费缴纳
						</view>
						<view class="list-cell-item">
							<view class="item-title">缴费月份</view>
							<view class="item-info">{{item.month}}</view>
						</view>
						<view class="list-cell-item">
							<view class="item-title">应缴金额</view>
							<view class="item-info">{{item.payable}}</view>
						</view>
						<view class="list-cell-item" v-if="item.status == 1">
							<view class="item-title">实缴金额</view>
							<view class="item-info">{{item.actual}}</view>
						</view>
						<view class="list-cell-item" v-if="item.status == 1">
							<view class="item-title">缴费时间</view>
							<view class="item-info">{{item.time}}</view>
						</view>
						<view class="list-cell-item">
							<view class="item-title">缴费状态</view>
							<view class="item-info">{{item.status == 0 ? "待缴费":"已缴费"}}</view>
						</view>
						<view class="list-bottom" v-if="item.status == 0">
							<button type="default" class="pay-btn" size="mini" @click="toPay(item)">缴费</button>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				partyFeeList: [],
				chooseYear: "",
				yearList: [],
				areaCode: "2021030823390052",
				page: 1,
				pageSize: 12,
				total: 0,
				userId: "",
				pullEnd: false,
				loadingType: "more",
				pageType: "0" //0 交费界面   1 我的缴费记录界面
			}
		},
		components: {
			empty
		},
		onReachBottom() {
			if(this.loadingType == "more"){
				this.loadingType = "loading"
				this.page ++;
				this.initData()
			}
		},
		onLoad(option) {
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				this.userId = userInfo.userUuid
			}
			
			if(option){
				this.pageType = option.pageType
			}
			this.getYearList();
			this.initData()
		},
		methods: {
			getYearList() {
				this.yearList = [];
				let nowYear = new Date().getFullYear();
				this.chooseYear = nowYear;
				for (let i = 0; i < 5; i++) {
					this.yearList.push(nowYear - i)
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			yearChange(e){
				this.chooseYear = this.yearList[e.detail.value]
				this.partyFeeList = []
				this.initData()
			},
			initData() {
				let params = {
					areaCode: this.areaCode,
					type: "1",
					status: this.pageType,
					page: this.page,
					pageSize: this.pageSize,
					userId: this.userId,
					month: this.chooseYear
				};

				this.$api.request.getLeaguePayList(params, (res) => {
					this.pullEnd = false
					if (res.body.status.statusCode == "0") {
						this.page = res.body.data.page
						this.total = res.body.data.total
						this.partyFeeList = this.partyFeeList.concat(res.body.data.list)
						if (this.partyFeeList.length == this.total) {
							this.loadingType = "noMore"
						} else {
							this.loadingType = "more"
						}
					}
				})

			},
			toPay(item) {
				uni.navigateTo({
					url: "/package_isp/pages/pay/pay?payId="+item.payMemberId
				})
			},
			stopPrevent() {},
			pullBox(e) {
				this.pullEnd = true
				this.page = 1;
				this.partyFeeList = [];
				this.initData()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: white;
	}

	.record-box {
		margin-top: 140upx;
	}

	.top-box {
		padding-top: 20upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		background-color: white;
		box-shadow: 0 8upx 8upx #e3e3e3;

		.top-title {
			padding: 20upx 40upx;

			.english-title {
				color: #7A7A7A;
				font-size: 26upx;
			}

			.chinese-title {
				font-size: 42upx;
				font-weight: bolder;
			}
		}

		.search-box {
			display: flex;
			flex-direction: row;
			padding: 70upx 30upx 0 0;
			color: #007AFF;
		}
	}

	.scroll-box {
		height: calc(100% - 200upx);
	}

	.record-box-item {
		width: calc(100% - 40upx);
		margin: 20upx;
		background-color: white;
		border-radius: 20upx;
		overflow: hidden;
		box-shadow: 0 0 15upx 5upx #efefef;
	}

	.list-cell {
		padding: 30upx;

		.list-title {
			height: 90upx;
			line-height: 90upx;
			border-bottom: 1px solid #e9eef5;
			font-size: 30upx;
			font-weight: bolder;
		}

		.list-bottom {
			height: 90upx;
			line-height: 90upx;
		}

		.list-cell-item {
			height: 90upx;
			line-height: 90upx;
			border-bottom: 1px solid #e9eef5;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.item-title {
				font-size: 28upx;
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				font-size: 24upx;
				text-align: right;
				margin-right: 20upx;
			}
		}

		.list-cell-last {
			height: 90upx;
			line-height: 90upx;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				font-size: 28upx;
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				font-size: 24upx;
				text-align: right;
				margin-right: 20upx;
			}
		}
	}


	.pay-btn {
		height: 50upx;
		line-height: 50upx !important;
		margin-top: 20upx;
		float: right;
		font-size: 24upx !important;
		background-color: #1DA3EE !important;
		color: white !important;
	}
</style>
